<script lang="ts" setup>
  import Button from '@sscd/button';
  import Tooltip from '@sscd/tooltip';
  const wrapStyles: Record<string, string> = {
    overflow: 'hidden',
    position: 'relative',
    padding: '24px',
    border: '1px solid #e9e9e9',
  };
  const getPopupContainer = (trigger: HTMLElement) => {
    return trigger.parentElement;
  };
</script>

<template>
  <div class="demo" :style="wrapStyles">
    <div class="demo-title">自动调整位置</div>
    <div class="demo-content">
      <Tooltip placement="left" title="Prompt Text" :get-popup-container="getPopupContainer">
        <Button>Adjust automatically / 自动调整</Button>
      </Tooltip>
      <br />
      <Tooltip
        placement="left"
        title="Prompt Text"
        :get-popup-container="getPopupContainer"
        :auto-adjust-overflow="false"
      >
        <Button style="margin-top: 10px">Ingore / 不处理</Button>
      </Tooltip>
    </div>
  </div>
</template>
